<!DOCTYPE html>
<html lang="zh-CN">
  <head>
     <meta charset="utf-8"> 
  <title>房源发布历史</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入bootstrap样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="css/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- bootstrap-table.min.js -->
<script src="js/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="js/bootstrap-table-zh-CN.min.js"></script>
 <style type="text/css">
    header{
      height: 65px;
      background: rgba(247,235,175,1);
    }
    header span{
      line-height: 65px;
      font-size:22px;
      font-weight: bolder;
      float: left;
      margin-left: 50px;
    }
    header #login{
      display: inline-block;
      float: right;
      margin-right: 150px;
      margin-top: 15px;
    }
    body {
      height: 670px;
    background: url(image/16.jpg) no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  input,select, textarea,.input-group{
    height: 25px;
      border: 0;
      border-radius: 3px;
      margin-bottom: 15px;
  }
  .sideBar{
    width: 200px;
    height: 550px;
    /* display: inline-block; */
    float: left;
    background: rgba(255,255,208,0.8);
    border-right:1px solid rgba(247,235,175,1);
  }
  .table-responsive{
    height: 500px;
    width: 900px;
    margin: 30px auto;
    background: rgba(255,255,208,0.6);
    border: 1px solid rgba(204,204,254,1);
    border-radius:10px;
  }
  .fixed-table-container thead th .th-inner{
    background: rgba(51,122,183,1)
  }
  </style>
  </head>
  <body>

  <header>
    <span align="left">分享式民宿酒店预订系统———房源发布历史</span>

  </header>
<div class="sideBar">
          <div class="row" style="width: 215px;">
            <div class="span2">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="publish.html">发布房源</a></li>
                <li  class="active"><a href="#">我的房源</a></li> 
                <li>
                  <a href="viewpersoninformation.html">个人中心</a></li>
                <li><a href="index.html" id="over">注销登录</a></li>
              </ul>
            </div>
          </div>
  </div>
  <div class="reservehistory">
    <div class="table-responsive">
      <table id="table"></table>
    </div>
  </div>
  </body>
  <script type="text/javascript">
      $(document).ready(function(){
          var userId = localStorage.getItem('userId')//获取用户Id
          // console.log(userId)
          if(!userId){
              window.location.href='index.html'
              //无用户id（级无登陆直接近页面不可以，直接去登录）
          }
        $('#table').bootstrapTable({
          url: "/housing/listMyPublished",
          striped: true,  //表格显示条纹，默认为false
          pageSize: 100, // 页面数据条数
          pageNumber: 1, // 首页页码
          queryParams: {
              userKeyId: userId
          },
          sortName: 'id', 
          columns: [{
            align: "center",
            field: 'userId',
            title: "发布人"
          },{
            align: "center",
              field: 'city',
            title: "所在城市"
          },{
            align: "center",
              field: 'address',
            title: "地址"
          },{
            align: "center",
              field: 'housingType',
            title: "房源类型"
          },{
            align: "center",
              field: 'roomType',
            title: "房间类型"
          },{
            align: "center",
              field: 'availableStartTime',
            title: "可入住时间",
              formatter: function(value)
              {
                  console.log("value:"+value);
                  return value.replace(/T.+/g,"");
              }
          },{
            align: "center",
              field: 'availableEndTime',
            title: "入住截止时间",
              formatter: function(value)
              {
                  return value.replace(/T.+/,"");
              }
          },{
            align: "center",
              field: 'price',
            title: "房间定价"
          },{
            align: "center",
              field: '',
            title: "详情",
            formatter: function(value,row,index){
              return '<a href="orderdetails.html?housingKeyId='+ row.keyId +'" class="btn btn-primary btn-xs">查看</a>'
            }
          },
          ],// 要排序的字段
          onLoadSuccess: function (data) { //加载成功时执行
              console.log(1111)
              console.log(data);
          },
          onLoadError: function (res) { //加载失败时执行
              console.log(res);
          }
        })
          // 注销事件
          $("#over").click(function(){
              localStorage.setItem('userId', '')
          });
        // js事件
        // $("p").click(function(){
        // $(this).hide();
    // });
});
  </script>
</html>
